<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iterable</title>
	<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<script>

	//Array可以采用下标的方式进行遍历，Set，Map就无法用下标进行遍历了
	//为了统一集合类型，es6标准引入iterable,Array,Set,Map都是Iterable类型
	//for ... of 来遍历 iterable 类型的数据
	var arr = [1,2,3,4];
	//通过for ... of 遍历 Array
	for (let x of arr) {
		console.log(x);
	}

	//通过for ... of 遍历set
	var set = new Set(['a','b','e','w']);
	for (let x of set) {
		console.log(x);
	}

	//通过for ... of 遍历map
	var map = new Map([['xiaoming',23],['mike',21],['jack',20]]);
	for (let x of map) {
		console.log(x);
	}

	//for ... in 和 for ... of 区别
	//for ... in 遍历对象的属性，array对象的属性是索引
	var a = ['A','B','C'];
	a.name = 'Jack';
	for (let x in a) {
		console.log(x); //结果 0,1,2,name 但却不包括Array的length属性
	}

	for (let x of a) {
		console.log(x); //结果 0,1,2
	}
	//for ... of 遍历的是iterable对象中的元素本身
	var arr1 = ['小红','小明','小兰'];
	for (let x of arr1) {
		console.log(x);
	}
	
	//更好的方法是调用iterable内置的forEach，该方法接受
	//一个函数，迭代元素时会自动回调该函数
	arr1.forEach(function (element,index,array) {
		//element:表示元素
		//index：表示索引
		//array：表示Array对象本身
		console.log(index + ":" + element + ":" + array[index]);

	})

	var map1 = new Map([['jack','japan'],['mike','korea'],['john','china']]);
	map1.forEach(function (element,key,map) {
		//console.log(index + "=>" + element + "=>" + map.get(index))
		console.log("key:" + key);
		console.log("element:" + element);
		console.log("value:" + map.get(key));
	})

	var john = {
		name:'john',
		age:20,
		class:9,
		address:'jingdu xiaoqu'
	}

	for(let prop in john) {
		console.log("key="+prop);
	}

	var set1 = new Set(['jack','mike','john'])
	set1.forEach(function (element,key,set) {
	});
	console.log(set1);
</script>
</body>
</html>